<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>    
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + 	request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE HTML>
<html>
<head>

<base href="<%=basePath%>">

<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<style type="text/css">
	.order_detail{
		background-color: durkgray;
		border: 1px solid black;
		border-right: 0; 
		height: 40px;
		line-height: 40px;
	}
	.order_detail input{
		height: 30px;
		text-align: center;
	}
	.order_add{
		border: 1px solid black;
	}
	#order_detail{
		text-align: center;
	}

</style>
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script> 
</head>
<body>
<article class="page-container">
	<form class="form form-horizontal" method="post" id="orderForm">
	<!-- 隐藏域 ，订单状态-->
	<input type="hidden" name="orderStatus" value="1">
	<!-- 隐藏域 ，订单id-->
	<input type="hidden" name="orderId" value="${order.orderId}">
	
	<div class="row cl">
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">业务员：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<select name="userId">
					<option value="0">请选择</option>
					<c:forEach items="${users}" var="obj">
						
						<option ${order.userId eq obj.userId ? 'selected':''} value="${obj.userId}">${obj.realname}</option>
					</c:forEach>
				</select>
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">客户：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<select name="customerId" id="customer" required="required">
					<option value="undefined">请选择</option>
					
					<!-- 
							html5 自定义hhml属性（用于在当前html表中存储数据）
							语法
							data-xxx
							data-：固定语法
							xxx：根据当前场景的命名(不支持驼峰命名法)
							如： data-id，data-name，data-age，data-user_phone
							
							jquery通过  : $.data("xxx属性")	
						
						 -->
					
					<c:forEach items="${customers}" var="obj">
						
						<option ${order.customerId eq obj.customerId ? 'selected':''} data-base_id="${obj.baseId}"   value="${obj.customerId}">${obj.customerName}</option>
					</c:forEach>
				</select>
			</div>
		</div>

		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">到达区域：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<select id="interval" name="intervalId">
					<option value="0">请选择</option>
					<c:forEach items="${intervals}" var="obj">
						<option ${order.intervalId eq obj.baseId ? 'selected':''}  value="${obj.baseId}">${obj.baseName}</option>
					</c:forEach>
				</select>
			</div>
		</div>
	</div>

	
	<div class="row cl">
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">收货地址：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value="${order.shippingAddress}"  placeholder="" id="shippingAddress" name="shippingAddress">
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">收货人：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value="${order.shippingName}"   placeholder="" id="shippingName" name="shippingName">
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">收货联系电话：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value="${order.shippingPhone}"   placeholder="" id="shippingPhone" name="shippingPhone">
			</div>
		</div>
	</div>
	<div class="row cl">
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">付款方式：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<select name="paymentMethodId">
					<c:forEach items="${payments}" var="obj">
						<option ${order.paymentMethodId eq obj.baseId ? 'selected':''} value="${obj.baseId}">${obj.baseName}</option>
					</c:forEach>
				</select>
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">货运方式：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<select name="freightMethodId">
					<c:forEach items="${freights}" var="obj">
						<option ${order.freightMethodId eq obj.baseId ? 'selected':''} value="${obj.baseId}">${obj.baseName}</option>
					</c:forEach>
				</select>
			</div>
		</div>
	</div>
	<div class="row cl">
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">取件方式：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<select name="takeMethodId">
					<c:forEach items="${fetchTypes}" var="obj">
						<option ${order.takeMethodId eq obj.baseId ? 'selected':''} value="${obj.baseId}">${obj.baseName}</option>
					</c:forEach>
				</select>
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">物流公司：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value="xx物流公司"  disabled="disabled"  placeholder="" id="customerName" name="customerName">
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">快递单号 ：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value="243242343" disabled="disabled"   placeholder="" id="customerName" name="customerName">
			</div>
		</div>
	</div>
	<div class="row cl">
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">收件人：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value="仓管员A(隔壁老王)" disabled="disabled"   placeholder="" id="customerName" name="customerName">
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">收货地址：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value="广州市天河区xxx" disabled="disabled"   placeholder="" id="customerName" name="customerName">
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">联系电话：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value="135xxxxx"  disabled="disabled"  placeholder="" id="customerName" name="customerName">
			</div>
		</div>
	</div>
	<div class="row cl">
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">取件地址：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value="${order.takeAddress}"   placeholder="" id="customerName" name="takeAddress">
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">联系电话：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value="${order.takePhone}"   placeholder="" id="takePhone" name="takePhone">
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">取件联系人：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value="${order.takeName}"   placeholder="" id="takeName" name="takeName">
			</div>
		</div>
	</div>
	<div class="row cl">
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">订单备注：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<textarea name="orderRemark" cols="" rows="" class="textarea"  placeholder="" >${order.orderRemark}</textarea>
			</div>
		</div>
	</div>
	
	
	
	<div  id="order_detail" class="row cl">
		<h4>货品管理</h4>
		<div>
			<div  class="col-xs-2 col-sm-2 order_detail">货物名称</div>
			<div  class="col-xs-2 col-sm-1 order_detail">数量</div>
			<div  class="col-xs-2 col-sm-1 order_detail">单位</div>
			<div  class="col-xs-2 col-sm-2 order_detail">单价</div>
			<div  class="col-xs-2 col-sm-2 order_detail">总价值</div>
			<div  class="col-xs-2 col-sm-3 order_detail">备注</div>
			<div  class="col-xs-2 col-sm-1 order_detail order_add">
				<span style="font: 30px;cursor: pointer;color: green" 
					class="glyphicon glyphicon-plus"
					onclick="add_goods_detail();"
					></span>
				</div>
		</div>
		
		<!-- 新增 -->
		<c:if test="${order == null}">
			<div  class="goods_detail" id="goods_detail">
				<div  class="col-xs-2 col-sm-2 order_detail">
					<input type="text" name="orderDetails[][goodsName]">
				</div>
				<div  class="col-xs-2 col-sm-1 order_detail">
					<input type="text" size="3" onkeyup="operationTotalPrice(this);"  name="orderDetails[][goodsNumber]">
				</div>
				<div  class="col-xs-2 col-sm-1 order_detail">
					<select name="orderDetails[][goodsUnit]">
						<c:forEach items="${units}" var="obj">
							<option value="${obj.baseId}">${obj.baseName}</option>
						</c:forEach>
					</select>
				</div>
				<div  class="col-xs-2 col-sm-2 order_detail">
					<input type="text"  onkeyup="operationTotalPrice(this);" name="orderDetails[][goodsUnitPrice]">
				
				</div>
				<div  class="col-xs-2 col-sm-2 order_detail">
					<input type="text" readonly="readonly" name="orderDetails[][goodsTotal]">
				</div>
				<div  class="col-xs-2 col-sm-3 order_detail">
					<input type="text" name="orderDetails[][goodsRemark]">
				</div>
				<div  class="col-xs-2 col-sm-1 order_detail order_add">
					<span id="removeSpan" style="font: 30px;cursor: pointer;color: red" 
					class="glyphicon glyphicon-remove"
					onclick="remove_goods_detail(this);"
					></span>
				</div>
			</div>
		</c:if>
		
		<!-- 修改 -->
		<c:if test="${order !=null}">
			<c:forEach items="${order.orderDetails}" var="obj">
				<div  class="goods_detail" id="goods_detail">
					<div  class="col-xs-2 col-sm-2 order_detail">
						<input type="text" value="${obj.goodsName}" name="orderDetails[][goodsName]">
					</div>
					<div  class="col-xs-2 col-sm-1 order_detail">
						<input type="text" value="${obj.goodsNumber}" size="3" onkeyup="operationTotalPrice(this);"  name="orderDetails[][goodsNumber]">
					</div>
					<div  class="col-xs-2 col-sm-1 order_detail">
						<select name="orderDetails[][goodsUnit]">
							<c:forEach items="${units}" var="obj1">
								<option ${obj.goodsUnit eq obj1.baseId ? 'selected':'' } value="${obj1.baseId}">${obj1.baseName}</option>
							</c:forEach>
						</select>
					</div>
					<div  class="col-xs-2 col-sm-2 order_detail">
						<input type="text"  value="${obj.goodsUnitPrice}"  onkeyup="operationTotalPrice(this);" name="orderDetails[][goodsUnitPrice]">
					
					</div>
					<div  class="col-xs-2 col-sm-2 order_detail">
						<input type="text" value="${obj.goodsTotal}" readonly="readonly" name="orderDetails[][goodsTotal]">
					</div>
					<div  class="col-xs-2 col-sm-3 order_detail">
						<input type="text" value="${obj.goodsRemark}" name="orderDetails[][goodsRemark]">
					</div>
					<div  class="col-xs-2 col-sm-1 order_detail order_add">
						<span id="removeSpan" style="font: 30px;cursor: pointer;color: red" 
						class="glyphicon glyphicon-remove"
						onclick="remove_goods_detail(this);"
						></span>
					</div>
				</div>
			
			</c:forEach>		
		</c:if>
	</div>
	
	<div class="row cl">
		<div class="col-xs-12 col-sm-12 col-xs-offset-4 col-sm-offset-3">
			<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
		</div>
	</div>
	</form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script> 
<script type="text/javascript" src="lib/jquery/jquery.serializejson.min.js"></script>  
<script type="text/javascript">


$(function(){
	$("#orderForm").validate({
		rules:{
			userId:{
				min:1
			},
			intervalId:{
				min:1
			},
			customerId:{
				min:1
			},
			shippingName:{
				required:true
			}
		},
		messages:{
			userId:{
				min:"请选择业务员"
			},
			intervalId:{
				min:"请选择客户的区间"
			},
			customerId:{
				min:"请选择客户"
			},
			shippingName:{
				required:"请选择收货人"
			}
		},
		submitHandler:function(form){
			
			//格式化表单为JSON数据
			var obj = $("#orderForm").serializeJSON();
			//将JSON对象转换成json格式的字符串
			var jsonStr = JSON.stringify(obj);
			console.log(typeof obj,obj);
			console.log(typeof jsonStr,jsonStr);
			
			$.ajax({
				type:"post",
				url:"${empty order ? 'order/insert.do':'order/update.do'}",
				contentType:"application/json",/* 以json格式向后台提交数据 */
				data:jsonStr,
				success:function(data){
					
					layer.msg(data.msg,{icon:data.code},function(){
						
						if(data.code == 1){
							//刷新父页面表格
							parent.refreshTable();
							//关闭弹出层
							parent.layer.closeAll();
						}
					})
				}
			})
		}
	})
	
})



/* 计算每一行的 单价*数量=总价 */
function operationTotalPrice(obj){
	
	//获取最外层div中的所有input
	var inputs = $(obj).parent().parent().find("input");
	
	//获取第二个和第三个div的值相乘赋值给第三个div
	var goodsNumber = inputs[1].value;
	var goodsPrice = inputs[2].value;
	
	//将值相乘赋值给第四个
	if(goodsNumber !="" && goodsPrice !=""){
		inputs[3].value = goodsNumber * goodsPrice;
	}
	
}


//删除货品表单
function remove_goods_detail(obj){
	
	//获取所有的class=goods_detail 的元素（类选择器是可以有多个元素）
	var goodsDetails = $(".goods_detail");
	if(goodsDetails.length == 1){
		layer.tips('最少保留一个货品明细！', $(obj));
		return false;
	}
	//删除当前 删除按钮的父标签的父标签
	$(obj).parent().parent().remove();
	
}

//新增货品表单
function add_goods_detail(){
	//克隆货品明细表单
	var goodsDetail = $("#goods_detail").clone();
	//清除货品明细表单的所有数据
	var inputs = goodsDetail.find("input");
	inputs.val("");
	
	
	//追加到外层div中
	$("#order_detail").append(goodsDetail);
}


$(function(){
	//为客户下拉框绑定onChange事件
	$("#customer").change(function(){
		//1.获取客户下拉框的所有的<option>中被选中的的 data-base_id的值
		var baseId = $("#customer > option:selected").data("base_id");
		//2.以baseId值作为条件去区间管理的下拉框中去找<option>的value值等于baseId 的选中，让其选中即可
		var option = $("#interval > option[value="+baseId+"]");
		//让其选中
		option.prop("selected",true);
	})
})

	
	
</script> 
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>